<template>
    <div class="rightKs">
        <ThemeTitle :title="title" />
        <!-- 实时监测预警 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">实时监测预警</div>
            </div>
        </div>
        <!-- 实时预警 -->
        <div class="realTime">
            <div class="kuangshan">
                <div class="kuangshanL">危化</div>
                <div class="kuangshanR">
                    <div v-for="(item, index) of weihuaList" :key="index">
                        <div>{{ item.name }}</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
            <div class="weikuang">
                <div class="weikuangL">矿山</div>
                <div class="weikuangR">
                    <div v-for="(item, index) of kuangshanList" :key="index">
                        <div>{{ item.name }}</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
            <div class="weikuang">
                <div class="weikuangL">尾矿</div>
                <div class="weikuangR">
                    <div v-for="(item, index) of weikuangList" :key="index">
                        <div>{{ item.name }}</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 动态监管数据分析 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">动态监管数据分析</div>
            </div>
            <!-- tabs -->
            <div class="timeTabs">
                <div
                    v-for="(item, index) of timeList"
                    :key="index"
                    @click="handleTimeClick(index)"
                    :class="{ timeActive: timeIndex == index }"
                >
                    {{ item }}
                </div>
            </div>
        </div>
        <!-- 动态监管数据分析chart -->
        <div id="dataAnyChart"></div>
        <div class="jierushu">
            <div v-for="(item, index) in jierushuList" :key="index">
                {{ item.name }}{{ item.value }}
            </div>
        </div>

        <div class="changeRightTwo">
            <!-- 月度企业报警排行 -->
            <div class="geoIntro">
                <div class="geoIntroTitle">
                    <div class="sideLine"></div>
                    <div class="geoIntroWord">月度企业报警排行</div>
                </div>
            </div>

            <!-- 月度企业报警排行表格 -->
            <div class="wellTable">
                <table border="1">
                    <tr>
                        <th>排行</th>
                        <th>企业名称</th>
                        <th>区域</th>
                        <th>报警总数</th>
                        <th>报警处置率</th>
                    </tr>
                    <tr v-for="(item, index) in tableList" :key="index">
                        <td v-for="(item1, index1) in item" :key="index1">
                            {{ item1 }}
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 企业风险趋势分析 -->
            <div class="geoIntro">
                <div class="geoIntroTitle">
                    <div class="sideLine"></div>
                    <div class="geoIntroWord">企业风险趋势分析</div>
                </div>
                <!-- tabs -->
                <div class="timeTabs">
                    <div
                        v-for="(item, index) of qiyeList"
                        :key="index"
                        @click="handleWeiClick(index)"
                        :class="{ timeActive: weiIndex == index }"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
            <!-- 风险趋势预测列表 -->
            <div id="fengxianChart"></div>
        </div>
    </div>
</template>

<script>
import "echarts-liquidfill/src/liquidFill.js";
import ThemeTitle from "../../common/ThemeTitle";
import {
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    reactive,
    onBeforeUnmount,
} from "vue";
import echarts from "echarts";
import axios from "axios";
export default {
    components: {
        ThemeTitle,
    },
    setup() {
        const title = provide("title", "安全生产风险监测预警");
        const numList = [2, 5, 1, 3, 8, 0];
        const tableList = [
            ["1", "海南炼化", "三亚市", "0", "0"],
            ["2", "海南矿业", "三沙市", "0", "0"],
            ["3", "临涣焦化", "儋州市", "0", "0"],
            ["4", "海南山金", "海口市", "0", "0"],
        ];
        let jierushuList = ref([
            { name: "危化企业", value: "50" },
            { name: "矿山企业", value: "60" },
            { name: "尾矿库", value: "30" },
        ]);

        let weihuaList = reactive([
            { name: "报警总数", value: "0" },
            { name: "报警企业", value: "0" },
            { name: "环比", value: "0" },
        ]);
        let kuangshanList = reactive([
            { name: "报警总数", value: "0" },
            { name: "报警企业", value: "0" },
            { name: "环比", value: "0" },
        ]);
        let weikuangList = reactive([
            { name: "报警总数", value: "0" },
            { name: "报警企业", value: "0" },
            { name: "环比", value: "0" },
        ]);

        const timeList = ["物联设备", "视频设备", "全部"];
        const qiyeList = ["危化", "矿山"];
        let optionValue = "";
        let timeIndex = ref(0);
        let timeArr = reactive([
            [[0.6], [0.3], [0.1]],
            [[0.5], [0.4], [0.2]],
            [[0.8], [0.7], [0.3]],
        ]);
        function handleTimeClick(index) {
            timeIndex.value = index;

            if (index == 0) {
                drawOneChart(timeArr[index]);
                jierushuList.value = [
                    { name: "危化企业", value: "50" },
                    { name: "矿山企业", value: "60" },
                    { name: "尾矿库", value: "30" },
                ];
            } else if (index == 1) {
                drawTwoChart(timeArr[index]);
                jierushuList.value = [
                    { name: "危化企业", value: "40" },
                    { name: "矿山企业", value: "30" },
                    { name: "尾矿库", value: "10" },
                ];
            } else if (index == 2) {
                drawThreeChart(timeArr[index]);
                jierushuList.value = [
                    { name: "危化企业", value: "80" },
                    { name: "矿山企业", value: "60" },
                    { name: "尾矿库", value: "50" },
                ];
            }
        }
        let weiIndex = ref(0);
        function handleWeiClick(index) {
            weiIndex.value = index;
            if (index == 0) {
                drawFxChart(
                    "危化",
                    [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
                );
            } else {
                drawFxChart1(
                    "矿山",
                    [130, 120, 135, 115, 132, 105, 102, 180, 182, 161, 174, 180]
                );
            }
        }
        let oneChart = null;
        let twoChart = null;
        let threeChart = null;
        function drawOneChart(data) {
            var dom = document.getElementById("dataAnyChart");
            oneChart = echarts.init(dom);
            var option = {
                series: [
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[0],
                        radius: "80%",
                        // 水球颜色
                        color: ["#49d088", "#38b470", "#2aaf66"],
                        center: ["20%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "#13FDCE",
                            },
                        },
                        label: {
                            normal: {
                                // textStyle: {
                                color: "rgba(73,252,176,1)",
                                insideColor: "rgba(73,252,176,1)",
                                fontSize: 20,
                                // }
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[1],
                        radius: "80%",
                        // 水球颜色
                        color: [
                            "rgba(151,119,255,1)",
                            "rgba(151,119,255,1)",
                            "rgba(151,119,255,1)",
                        ],
                        center: ["50%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "rgba(151,119,255,1)",
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "rgba(73,252,176,1)",
                                    insideColor: "rgba(73,252,176,1)",
                                    fontSize: 20,
                                },
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[2],
                        radius: "80%",
                        // 水球颜色
                        color: ["#FFBF11", "#F4B30E", "#EACE36"],
                        center: ["80%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "#FFBF11",
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "rgba(73,252,176,1)",
                                    insideColor: "rgba(73,252,176,1)",
                                    fontSize: 20,
                                },
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                ],
            };
            oneChart.setOption(option);
            window.addEventListener("resize", () => {
                oneChart.resize();
            });
        }
        function drawTwoChart(data) {
            var dom = document.getElementById("dataAnyChart");
            twoChart = echarts.init(dom);
            var option = {
                series: [
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[0],
                        radius: "80%",
                        // 水球颜色
                        color: ["#49d088", "#38b470", "#2aaf66"],
                        center: ["20%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "#13FDCE",
                            },
                        },
                        label: {
                            normal: {
                                // textStyle: {
                                color: "rgba(73,252,176,1)",
                                insideColor: "rgba(73,252,176,1)",
                                fontSize: 20,
                                // }
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[1],
                        radius: "80%",
                        // 水球颜色
                        color: [
                            "rgba(151,119,255,1)",
                            "rgba(151,119,255,1)",
                            "rgba(151,119,255,1)",
                        ],
                        center: ["50%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "rgba(151,119,255,1)",
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "rgba(73,252,176,1)",
                                    insideColor: "rgba(73,252,176,1)",
                                    fontSize: 20,
                                },
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[2],
                        radius: "80%",
                        // 水球颜色
                        color: ["#FFBF11", "#F4B30E", "#EACE36"],
                        center: ["80%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "#FFBF11",
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "rgba(73,252,176,1)",
                                    insideColor: "rgba(73,252,176,1)",
                                    fontSize: 20,
                                },
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                ],
            };
            twoChart.setOption(option);
            window.addEventListener("resize", () => {
                twoChart.resize();
            });
        }
        function drawThreeChart(data) {
            var dom = document.getElementById("dataAnyChart");
            threeChart = echarts.init(dom);
            var option = {
                series: [
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[0],
                        radius: "80%",
                        // 水球颜色
                        color: ["#49d088", "#38b470", "#2aaf66"],
                        center: ["20%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "#13FDCE",
                            },
                        },
                        label: {
                            normal: {
                                // textStyle: {
                                color: "rgba(73,252,176,1)",
                                insideColor: "rgba(73,252,176,1)",
                                fontSize: 20,
                                // }
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[1],
                        radius: "80%",
                        // 水球颜色
                        color: [
                            "rgba(151,119,255,1)",
                            "rgba(151,119,255,1)",
                            "rgba(151,119,255,1)",
                        ],
                        center: ["50%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "rgba(151,119,255,1)",
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "rgba(73,252,176,1)",
                                    insideColor: "rgba(73,252,176,1)",
                                    fontSize: 20,
                                },
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                    {
                        type: "liquidFill",
                        //data: [0.6, 0.5, 0.4, 0.3],
                        data: data[2],
                        radius: "80%",
                        // 水球颜色
                        color: ["#FFBF11", "#F4B30E", "#EACE36"],
                        center: ["80%", "50%"],
                        // outline  外边
                        outline: {
                            // show: false
                            borderDistance: 5,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: "#FFBF11",
                            },
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "rgba(73,252,176,1)",
                                    insideColor: "rgba(73,252,176,1)",
                                    fontSize: 20,
                                },
                            },
                        },
                        // 内图 背景色 边
                        backgroundStyle: {
                            color: "rgba(4,24,74,0.8)",
                            // borderWidth: 5,
                            // borderColor: 'red',
                        },
                    },
                ],
            };
            threeChart.setOption(option);
            window.addEventListener("resize", () => {
                threeChart.resize();
            });
        }
        let whChart = null;
        let ksChart = null;
        function drawFxChart(cName, qushiArr) {
            var dom = document.getElementById("fengxianChart");
            whChart = echarts.init(dom);
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "5%",
                    top: "20%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位（%）",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14,
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#57617B",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: cName,
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0, 136, 212, 0.3)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(0, 136, 212, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(0,136,212)",
                                borderColor: "rgba(0,136,212,0.2)",
                                borderWidth: 12,
                            },
                        },
                        data: qushiArr,
                    },
                ],
            };
            whChart.setOption(option);
            window.addEventListener("resize", () => {
                whChart.resize();
            });
        }
        function drawFxChart1(cName, qushiArr) {
            var dom = document.getElementById("fengxianChart");
            ksChart = echarts.init(dom);
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "5%",
                    top: "20%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位（%）",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14,
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#57617B",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: cName,
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0, 136, 212, 0.3)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(0, 136, 212, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(0,136,212)",
                                borderColor: "rgba(0,136,212,0.2)",
                                borderWidth: 12,
                            },
                        },
                        data: qushiArr,
                    },
                ],
            };
            ksChart.setOption(option);
            window.addEventListener("resize", () => {
                ksChart.resize();
            });
        }
        onBeforeUnmount(() => {
            if (oneChart) {
                echarts.dispose(oneChart);
            }
            if (twoChart) {
                echarts.dispose(twoChart);
            }
            if (threeChart) {
                echarts.dispose(threeChart);
            }
            if (whChart) {
                echarts.dispose(whChart);
            }
            if (ksChart) {
                echarts.dispose(ksChart);
            }
        });
        onMounted(() => {
            axios
                .post(
                    `http://172.25.110.34:81/foundation/union/subject/scrnAqscfxjcyj1/list`,
                    {}
                )
                .then((res) => {
                    let ksData = res.data.data[0];
                    //实时监测预警
                    weihuaList[0].value = ksData.ssjcyj.whpjc.njzs;
                    weihuaList[1].value = ksData.ssjcyj.whpjc.bjqy;
                    weihuaList[2].value = ksData.ssjcyj.whpjc.yhb;

                    kuangshanList[0].value = ksData.ssjcyj.ksjc.bjzs;
                    kuangshanList[1].value = ksData.ssjcyj.ksjc.bjqy;
                    kuangshanList[2].value = ksData.ssjcyj.ksjc.yhb;

                    weikuangList[0].value = ksData.ssjcyj.wkjc.bjzs;
                    weikuangList[1].value = ksData.ssjcyj.wkjc.bjqy;
                    weikuangList[2].value = ksData.ssjcyj.wkjc.yhb;

                    //动态监管数据
                    ksData.dtjcsjfx.whqywlsb;
                    ksData.dtjcsjfx.ksqyspsb;
                    ksData.dtjcsjfx.wkkspsb;
                    //月度企业报警

                    //企业风险趋势
                });
            drawOneChart(timeArr[0]);
            drawFxChart(
                "危化",
                [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
            );
        });
        return {
            weihuaList,
            kuangshanList,
            weikuangList,

            timeList,
            tableList,
            qiyeList,
            title,

            jierushuList,
            handleTimeClick,
            timeIndex,
            handleWeiClick,
            weiIndex,
        };
    },
};
</script>
<style >
table,
table tr th,
table tr td {
    border: 1px solid #155e75;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightKs {
        .realTime {
            margin-top: vh(10);
            width: 100%;
            height: vh(220);
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .kuangshan {
                display: flex;
                justify-content: space-between;

                .kuangshanL {
                    width: vw(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .kuangshanR {
                    width: vw(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw(12);
                        }

                        div:nth-child(2) {
                            width: vw(55);
                            height: vh(23);
                            line-height: vh(23);
                            text-align: center;
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }

            .weikuang {
                display: flex;
                justify-content: space-between;

                .weikuangL {
                    width: vw(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .weikuangR {
                    width: vw(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw(12);
                        }

                        div:nth-child(2) {
                            text-align: center;
                            width: vw(55);
                            height: vh(23);
                            line-height: vh(23);
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }

        #callPoliceChart {
            width: vw(365);
            height: vh(130);
        }

        .changeRightTwo {
            #fengxianChart {
                margin-top: vh(10);
                width: vw(364);
                height: vh(150);
            }

            .wellTable {
                width: 100%;
                height: vh(200);

                table {
                    width: 100%;
                    height: vh(200);
                    line-height: vh(40);
                    text-align: center;
                    border-color: #155e75;
                    border-collapse: collapse;

                    tr:nth-child(1) {
                        height: vh(25);

                        th {
                            color: rgba(30, 212, 233, 1);
                        }
                    }

                    tr {
                        color: #fff;
                        font-size: vw(12);
                    }
                }
            }

            .geoIntro {
                width: vw(365);
                margin-top: vh(20);
                display: flex;
                justify-content: space-between;

                .geoIntroTitle {
                    margin-bottom: vh(13);
                    display: flex;

                    .sideLine {
                        width: vw(2);
                        height: vh(15);
                        margin-right: vw(10);
                        background: #86ceeb;
                    }

                    .geoIntroWord {
                        color: #00EAFF;
                        font-size: vw(16);
                    }
                }

                .timeTabs {
                    float: right;
                    height: vh(22);
                    display: flex;
                    width: vw(200);

                    div {
                        flex: 1;
                        height: vh(22);
                        font-size: vw(12);
                        height: vh(25);
                        line-height: vh(25);
                        text-align: center;
                        background: #012332;
                        border: 1px solid #1398cf;
                        cursor: pointer;
                    }

                    .timeActive {
                        color: #00e5fd;
                    }
                }
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .timeTabs {
                float: right;
                height: vh(22);
                display: flex;
                width: vw(200);

                div {
                    flex: 1;
                    height: vh(22);
                    font-size: vw(12);
                    height: vh(25);
                    line-height: vh(25);
                    text-align: center;
                    background: #012332;
                    border: 1px solid #1398cf;
                    cursor: pointer;
                }

                .timeActive {
                    color: #00e5fd;
                }
            }
        }

        #dataAnyChart {
            width: vw(364);
            height: vh(120);
        }

        .jierushu {
            width: 100%;
            height: vh(30);
            line-height: vh(30);
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightKs {
        .realTime {
            margin-top: vh(10);
            width: vw1(414);
            height: vh(420);
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .kuangshan {
                display: flex;
                justify-content: space-between;

                .kuangshanL {
                    width: vw1(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .kuangshanR {
                    width: vw1(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw1(12);
                        }

                        div:nth-child(2) {
                            width: vw1(55);
                            height: vh(23);
                            line-height: vh(23);
                            text-align: center;
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }

            .weikuang {
                display: flex;
                justify-content: space-between;

                .weikuangL {
                    width: vw1(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .weikuangR {
                    width: vw1(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw1(12);
                        }

                        div:nth-child(2) {
                            text-align: center;
                            width: vw1(55);
                            height: vh(23);
                            line-height: vh(23);
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }

        #callPoliceChart {
            width: vw1(414);
            height: vh(130);
        }

        .changeRightTwo {
            position: absolute;
            top: 0;
            right: 0;

            #fengxianChart {
                margin-top: vh(30);
                width: vw1(414);
                height: vh(300);
            }

            .wellTable {
                width: vw1(414);
                height: vh(500);

                table {
                    width: vw1(414);
                    height: vh(500);
                    line-height: vh(50);
                    text-align: center;
                    border-color: #155e75;
                    border-collapse: collapse;

                    tr:nth-child(1) {
                        height: vh(50);

                        th {
                            color: rgba(30, 212, 233, 1);
                        }
                    }

                    tr {
                        color: #fff;
                        font-size: vw1(12);
                    }
                }
            }

            .geoIntro {
                width: vw1(414);
                margin-top: vh(20);
                display: flex;
                justify-content: space-between;

                .geoIntroTitle {
                    margin-bottom: vh(13);
                    display: flex;

                    .sideLine {
                        width: vw1(2);
                        height: vh(15);
                        margin-right: vw1(10);
                        background: #86ceeb;
                    }

                    .geoIntroWord {
                        color: #00EAFF;
                        font-size: vw1(16);
                    }
                }

                .timeTabs {
                    float: right;
                    height: vh(22);
                    display: flex;
                    width: vw1(200);

                    div {
                        flex: 1;
                        height: vh(22);
                        font-size: vw1(12);
                        height: vh(25);
                        line-height: vh(25);
                        text-align: center;
                        background: #012332;
                        border: 1px solid #1398cf;
                        cursor: pointer;
                    }

                    .timeActive {
                        color: #00e5fd;
                    }
                }
            }
        }

        .geoIntro {
            width: vw1(414);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .timeTabs {
                float: right;
                height: vh(22);
                display: flex;
                width: vw1(200);

                div {
                    flex: 1;
                    height: vh(22);
                    font-size: vw1(12);
                    height: vh(25);
                    line-height: vh(25);
                    text-align: center;
                    background: #012332;
                    border: 1px solid #1398cf;
                    cursor: pointer;
                }

                .timeActive {
                    color: #00e5fd;
                }
            }
        }

        #dataAnyChart {
            width: vw1(414);
            height: vh(120);
            margin-top: vh(100);
        }

        .jierushu {
            width: vw1(414);
            height: vh(30);
            line-height: vh(30);
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>